<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>84和火星坐标系之间的转换</title>
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">

    let gcjlnglat = GE.GPSUtils.gcj_encrypt(121.97978, 40.75601); //84坐标转换到火星坐标

    window.app = new GE.App('mapContainer', {
        // position: [120.025986, 30.248976, 9410], //相机的位置
        // lookAt: [120.025986, 30.248976, 0], //相机看向的地图位置
        // position: [121.97978, 40.75601, 150],
        // lookAt: [121.97978, 40.75601, 0],

        position: [gcjlnglat[0], gcjlnglat[1], 15000],
        lookAt: [gcjlnglat[0], gcjlnglat[1], 0],

        // isLoadSelectRange:true, //是否启用某区域范围内浏览
        // leftBottom:[121.90857676583558, 40.66178471819924, 0],//区域范围左下点位
        // rightUp:[122.05743505411345, 40.81460904866403, 0],//区域范围右上点位

        cameraScrollSpeed: 5, //鼠标滚动时，控制相机上下移动的速度
        // minZoom: 12, //允许地图的最小层级
        minZoom: 3, //允许地图的最小层级
        maxZoom: 18, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: false, //是否使用瓦片默认纹理
        useCarpet: true, //开启地图的地毯功能
        background: "Fog", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        // backGroundColorA:'#AAAAFF', //当background的值为Gradient时，需要配置该参数。最下端颜色，默认值为#0000FF
        // backGroundColorB:'#0000FF', //当background的值为Gradient时，需要配置该参数。最上端颜色，默认值为#FF0000
        // backGroundColor: '#F5F5F5', //当background的值为Color时，需要配置该参数，默认值为#00BFFF
        // imageUrl: 'http://localhost:9000/examples/assets/img_logo.39362dc1.png', //当background的值为Image时，需要配置该参数。默认值为null
        maxSlopeAngle: 30, //地图最大倾斜角度
        // extraStep: 4, //额外加载瓦片的步长
        // verticalLevel: 15, //地图层级小于等于该层级开时，相机开始垂直正对着地图
        tileDefaultColor: '#C0C0C0', //瓦片默认颜色
        baseLayer: [
            {
                url: 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}', //高德的瓦片底图
                // url: 'http://webst03.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}',
                // url: 'https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            },
        ]
    });


    window.app.on('Click', function (e) {
        // let gcjlnglat = e.lnglat; //这个经纬度在火星坐标系。因为底图影像是火星坐标系，从web墨卡托反投影到椭球地理坐标系，获取的坐标在火星坐标系
        // console.log(gcjlnglat);
        // let wgs84lnglat = GE.GPSUtils.gcj_decrypt_exact(gcjlnglat.x, gcjlnglat.y); //火星坐标转换到84坐标
        // console.log(wgs84lnglat);
    });
    btn();

    function btn() {
        let button = new GE.Button('设置相机的位置', function () {公寓
            let wgs84Lnglat = [121.97078, 40.75001]; //84坐标
            console.log(wgs84Lnglat);
            let gcj02Point = GE.GPSUtils.gcj_encrypt(wgs84Lnglat[0], wgs84Lnglat[1]); //84坐标转换到火星坐标

            wgs84Lnglat = GE.GPSUtils.gcj_decrypt_exact(gcj02Point[0], gcj02Point[1]); //火星坐标转换到84坐标
            console.log(wgs84Lnglat);
            
            // let cameraPosition = new GE.Point(gcj02Point[0], gcj02Point[1], 1500, '4326').toEPSGWeb();
            // let lookAtPosition = new GE.Point(gcj02Point[0], gcj02Point[1], 0, '4326').toEPSGWeb();
            // app.camera.flyTo(cameraPosition, lookAtPosition, 100);
        });
        app.ui.add(button);
        window.button = button;

    }

</script>

</html>